<script setup lang="tsx">
import { ref, unref, reactive } from 'vue'
import { ElCard, ElDialog, ElInput, ElButton } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'
import { getConditionListApi, addConditionApi, delConditionApi } from '@/api/dashboard/ticket'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { Table } from '@/components/Table'
import { BaseButton } from '@/components/Button'
import { useIcon } from '@/hooks/web/useIcon'

const addIcon = useIcon({ icon: 'vi-ep:document-add' })

const props = defineProps({
  tcType: {
    type: String,
    default: '1'
  }
})

const enumsConfig = {
  '1': {
    title: '自有户',
    des: '(待签收状态下，出票人、收款人、背书人、被背书人、出质人、质权人、保证人、被保证人中出现用户自定义的自有户给出提示)',
    label: '自有户名称',
  },
  '3': {
    title: '承兑人黑名单',
    des: '(待签收状态下，承兑人名称包含自定义的黑名单中给出提示)',
    label: '承兑人名称',
  },
  '4': {
    title: '收款人黑名单',
    des: '(待签收状态下，收款人包含自定义的黑名单中给出提示)',
    label: '收款人名称',
  },
  '5': {
    title: '背书人黑名单',
    des: '(待签收状态下，背书人、被背书人、出质人、质权人、保证人、被保证人包含自定义的黑名单中给出提示)',
    label: '背书人名称',
  },
  '6': {
    title: '异常准入名单',
    des: '(待签收状态下，出票人、收款人、背书人、被背书人、出质人、质权人、保证人、被保证人包含《异常准入名单》关键字给出提示)',
    label: '名称',
  }
}

const searchParams = ref({
  tcType: props.tcType
})

const { tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getConditionListApi({
      pageIndex: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list,
      total: res.data.total
    }
  }
})
const innerVisible = ref(false)
const input = ref('')

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'tcName',
    label: enumsConfig[props.tcType].label
  },
  {
    field: 'updateTime',
    label: '更新时间'
  },
  {
    field: 'action',
    label: '操作',
    table: {
      slots: {
        default: (data: any) => {
          return (
            <>
              <BaseButton
                size="small"
                plain
                type="danger"
                onClick={() => {
                  onDelete(data.row)
                }}
              >
                删除
              </BaseButton>
            </>
          )
        }
      }
    }
  }
])

// @ts-ignore
const { allSchemas } = useCrudSchemas(crudSchemas)

const onAdd = async () => {
  innerVisible.value = false
  await addConditionApi({
    tcType: props.tcType,
    tcName: input.value
  })
  input.value = ''
  getList()
}

const onDelete = async (row) => {
  await delConditionApi({
    ids: row.id
  })
  getList()
}
</script>

<template>
  <el-card class="mt-3">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="card-header">
          <span style="font-weight: 900; font-size: 20px">{{
            enumsConfig[props.tcType].title
          }}</span>
          <span style="color: #a2a2a2">{{ enumsConfig[props.tcType].des }}</span>
        </div>
        <BaseButton type="primary" :icon="addIcon" @click="innerVisible = true"> 新增 </BaseButton>
      </div>
    </template>
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="allSchemas.tableColumns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total: total
      }"
    />
  </el-card>
  <el-dialog v-model="innerVisible" width="500" title="新增自有户" append-to-body>
    <el-input v-model="input" clearable placeholder="请输入自有户名称" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="(innerVisible = false), (input = '')">取消</el-button>
        <el-button :disabled="!input" type="primary" @click="onAdd"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
